<template>
  <!-- 详情页 -->
  <div>
    <!-- 返回上一页 -->
    <div>
      <el-button
        type="primary"
        @click="$router.push('/commerce')"
      >返回</el-button>
    </div>
    <el-form ref="form" label-width="90px" :model="form" :rules="rules">
      <!-- 客户资料 -->
      <div>
        <!-- 客户资料头部 -->
        <div class="Customers">
          <span class="span1">客户资料</span>
          <span class="span2">ID XS28948</span>
        </div>
        <!-- 客户资料信息 -->
        <div class="customersInfo">
          <div class="customersBorder">
            <!-- 第一行输入框 -->
            <el-row style="margin-top: 25px">
              <el-col :span="6">
                <el-form-item label="客户姓名:" prop="name">
                  <el-input v-model="form.name" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="手机号:" prop="phone">
                  <el-input v-model="form.phone" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="职业:">
                  <el-select v-model="form.occupation" placeholder="请选择">
                    <el-option label="无" value="1" />
                    <el-option label="技术" value="2" />
                    <el-option label="产品" value="3" />
                    <el-option label="设计" value="4" />
                    <el-option label="运营" value="5" />
                    <el-option label="市场" value="6" />
                    <el-option label="人事/财务行政" value="7" />
                    <el-option label="销售" value="8" />
                    <el-option label="传媒" value="9" />
                    <el-option label="金融" value="10" />
                    <el-option label="教育培训" value="11" />
                    <el-option label="医疗健康" value="12" />
                    <el-option label="房地产/建筑" value="13" />
                    <el-option label="供应链/物流" value="14" />
                    <el-option label="采购/贸易" value="15" />
                    <el-option label="咨询/翻译/法律" value="16" />
                    <el-option label="旅游" value="17" />
                    <el-option label="生成制作" value="18" />
                    <el-option label="其他" value="19" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="学历:">
                  <el-select v-model="form.education" placeholder="请选择">
                    <el-option label="小学" value="1" />
                    <el-option label="初中" value="2" />
                    <el-option label="高中" value="3" />
                    <el-option label="中专" value="4" />
                    <el-option label="大专" value="5" />
                    <el-option label="本科" value="6" />
                    <el-option label="研究生" value="7" />
                    <el-option label="博士" value="8" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第二行输入框 -->
            <el-row style="margin-top: 0px">
              <el-col :span="6">
                <el-form-item label="所在地区:" prop="provinces">
                  <el-cascader
                    v-model="form.provinces"
                    size="large"
                    :options="provinceAndCityData"
                    placeholder="请选择活动区域"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="微信号:">
                  <el-input v-model="form.weixin" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="年龄:">
                  <el-input v-model.number="form.age" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="专业:">
                  <el-select v-model="form.major" placeholder="请选择">
                    <el-option label="哲学" value="1" />
                    <el-option label="经济学" value="2" />
                    <el-option label="法学" value="3" />
                    <el-option label="教育学" value="4" />
                    <el-option label="文学" value="5" />
                    <el-option label="历史学" value="6" />
                    <el-option label="理学" value="7" />
                    <el-option label="工学" value="8" />
                    <el-option label="农学" value="9" />
                    <el-option label="医学" value="10" />
                    <el-option label="管理学" value="11" />
                    <el-option label="艺术学" value="12" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第三行输入框 -->
            <el-row style="margin-top: 0px">
              <el-col :span="6">
                <el-form-item label="在职情况:">
                  <el-select v-model="form.job" placeholder="请选择">
                    <el-option label="待业" value="1" />
                    <el-option label="在职" value="2" />
                    <el-option label="已离职" value="3" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="当前薪资:">
                  <el-select v-model="form.salary" placeholder="请选择">
                    <el-option label="1K-3k" value="1" />
                    <el-option label="3K-6K" value="2" />
                    <el-option label="6K-10K" value="3" />
                    <el-option label="10K-15K" value="4" />
                    <el-option label="15K-20K" value="5" />
                    <el-option label="20K+" value="6" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="QQ:">
                  <el-input v-model="form.qq" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="性别:">
                  <el-radio v-model="form.sex" label="1">男</el-radio>
                  <el-radio
                    v-model="form.sex"
                    label="0"
                  >女</el-radio>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第四行输入框 -->
            <el-row style="margin-top: 0px">
              <el-col :span="6">
                <el-form-item label="目标薪资:">
                  <el-select v-model="form.expectedSalary" placeholder="请选择">
                    <el-option label="1K-3k" value="1" />
                    <el-option label="3K-6K" value="2" />
                    <el-option label="6K-10K" value="3" />
                    <el-option label="10K-15K" value="4" />
                    <el-option label="15K-20K" value="5" />
                    <el-option label="20K+" value="6" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="18">
                <el-form-item label="备注:">
                  <el-input
                    v-model="form.remark"
                    type="text"
                    placeholder="请输入内容"
                    maxlength="20"
                    show-word-limit
                    class="inputs"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>

      <!-- 客户意向 -->
      <div style="margin-top: 30px">
        <!-- 客户意向头部 -->
        <div class="Intention">
          <span class="span1">客户意向</span>
        </div>
        <!-- 客户意向信息 -->
        <div class="IntentionInfo">
          <div class="IntentionBorder">
            <!-- 第一行输入框 -->
            <el-row style="margin-top: 25px">
              <el-col :span="6">
                <el-form-item label="意向学科:" prop="subject">
                  <el-select v-model="form.subject" placeholder="请选择" @change="subjects">
                    <el-option label="Java" value="0" />
                    <el-option label="前端" value="1" />
                    <el-option label="人工智能" value="2" />
                    <el-option label="大数据" value="3" />
                    <el-option label="Python" value="4" />
                    <el-option label="测试" value="6" />
                    <el-option label="新媒体" value="7" />
                    <el-option label="产品经理" value="8" />
                    <el-option label="UI设计" value="9" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="学习原因:">
                  <el-input v-model="form.reasons" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="职业计划:">
                  <el-input v-model="form.plan" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="计划时间:">
                  <el-input v-model="form.planTime" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第二行输入框 -->
            <el-row style="margin-top: 0px">
              <el-col :span="6">
                <el-form-item label="意向课程:">
                  <el-select v-model="form.courseId" placeholder="请选择">
                    <el-option v-for="(item,index) in course" :key="index" :label="item" :value="index" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="18">
                <el-form-item label="其他意向:">
                  <el-input
                    v-model="form.otherIntention"
                    type="text"
                    placeholder="请输入内容"
                    maxlength="20"
                    show-word-limit
                    class="inputs"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item>
              <el-button type="primary" style="margin-left:920px" @click="information">保存客户资料</el-button>
            </el-form-item>
          </div>
        </div>
      </div>

      <!-- 添加沟通记录 -->
      <div style="margin-top: 30px">
        <!-- 添加沟通记录头部 -->
        <div class="Intention">
          <span class="span1">添加沟通记录</span>
        </div>
        <!-- 添加沟通记录信息 -->
        <div class="CommunicationInfo">
          <div class="CommunicationBorder">
            <span class="left">
              <el-row style="margin-top: 25px">
                <el-col :span="24">
                  <el-form-item label="跟进状态:">
                    <el-select v-model="form.status" placeholder="请选择">
                      <el-option label="待跟进" value="1" />
                      <el-option label="跟进中" value="2" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row style="margin-top: 0px">
                <el-col :span="24">
                  <el-form-item label="下次跟进:">
                    <el-date-picker
                      v-model="form.nextTime"
                      type="datetime"
                      placeholder="选择日期时间"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row style="margin-top: 0px">
                <el-col :span="24">
                  <el-form-item label="沟通重点:">
                    <el-select
                      v-model="value"
                      multiple
                      filterable
                      allow-create
                      default-first-option
                      placeholder="请选择文章标签"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select> </el-form-item></el-col>
              </el-row>
            </span>
            <span class="right">
              <el-row style="margin-top: 0px">
                <el-col :span="24">
                  <el-form-item label="沟通纪要:">
                    <el-input
                      type="textarea"
                      placeholder="请输入内容"
                      maxlength="20"
                      show-word-limit
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item>
                <el-button type="primary">保存沟通记录</el-button>
                <el-button type="primary" @click="kickout">踢回公海</el-button>
                <el-button type="primary">转成交客户</el-button>
              </el-form-item>
            </span>
          </div>
        </div>
      </div>

      <!-- 历史沟通记录 -->
      <div style="margin-top: 30px">
        <!-- 添加沟通记录头部 -->
        <div class="Intention">
          <span class="span1">历史沟通记录</span>
        </div>
      </div>
      <div class="history">
        <el-table
          border
          height="200"
          :data="recordList"
          style="width: 95%; margin-top: 20px; margin-left: 32px;"
          :cell-style="{ 'text-align': 'center' }"
          :header-cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column
            prop="createTime"
            label="本次沟通时间"
            width="180"
          >
            <template #default="{row}">
              {{ startDate(row.createTime) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="keyItems"
            label="沟通重点"
          >
            <template #default="{row}">
              <el-tag v-if="row.keyItems==='1'">课程</el-tag>
              <el-tag v-if="row.keyItems==='2'">价格</el-tag>
              <el-tag v-if="row.keyItems==='3'">位置</el-tag>
              <el-tag v-if="row.keyItems==='4'">时间</el-tag>
              <el-tag v-if="row.keyItems==='5'">师资</el-tag>
              <el-tag v-if="row.keyItems==='6'">项目</el-tag>
              <el-tag v-if="row.keyItems==='7'">薪资</el-tag>
              <el-tag v-if="row.keyItems==='8'">职业</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="沟通状态"
            width="280px"
          >
            <template #default="{row}">
              接通-下次次跟进 {{ startDate(row.createTime) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="record"
            label="沟通纪要"
          />
          <el-table-column
            prop="createBy"
            label="沟通人"
          >
            <template #detault="{row}">{{ row.createBy }}</template>
          </el-table-column>
        </el-table>
      </div>
    </el-form>
    <!-- 踢出公海弹窗 -->
    <kickout :kickout-dialog.sync="kickoutDialog" />
  </div>
</template>

<script>
import kickout from './addKickout.vue'
import { getComMerceDetail, courseComMerceDetail, putComMerceDetail, recordComMerceDetail } from '@/api/comMerceDetail'
import { provinceAndCityData } from 'element-china-area-data'
export default {
  components: {
    kickout
  },
  data() {
    return {
      region: '',
      form: {
        'remark': '', // 备注
        'createBy': '',
        'createTime': '',
        'updateBy': '',
        'updateTime': '',
        'id': 0, // id
        'name': '', // 客户姓名
        'phone': '', // 手机号
        'channel': '',
        'activityId': 0,
        'activityName': '',
        'activityInfo': '',
        'sex': '', // 性别
        'age': 0, // 年龄
        'weixin': '', // 微信
        'qq': '', // qq
        'level': '',
        'subject': '', // 意向学科
        'status': '', // 跟进状态
        'assignBy': '',
        'assignTime': '',
        'owner': '',
        'ownerTime': '',
        'falseCount': 0,
        'nextTime': '', // 下次跟进时间
        'endTime': '',
        'userId': 0,
        'transfer': '',
        'provinces': [],
        'city': '',
        'region': '',
        'courseId': '', // 意向课程
        'occupation': '', // 职业
        'education': '', // 学历
        'job': '', // 在职情况
        'salary': '', // 当前薪资
        'major': '', // 专业
        'expectedSalary': '', // 希望薪资
        'reasons': '', // 学习原因
        'plan': '', // 职业计划
        'planTime': '', // 计划时间
        'otherIntention': '', // 其他意向
        'clueId': 0,
        'beginCreateTime': '',
        'endCreateTime': ''
      },
      options: [
        {
          value: 'HTML',
          label: 'HTML'
        },
        {
          value: 'CSS',
          label: 'CSS'
        },
        {
          value: 'JavaScript',
          label: 'JavaScript'
        }
      ],
      // 校验
      rules: {
        name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
        ],
        subject: [{ required: true, message: '意向学科不能为空', trigger: 'blur' }]

      },
      // 选择文章标签
      value: [],
      data: [
        {
          id: '129871122',
          name: '王小虎',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        },
        {
          id: '129871222',
          name: '王小虎',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        },
        {
          id: '129837122',
          name: '王小虎',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        },
        {
          id: '129874122',
          name: '王小虎',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        }
      ],
      // 踢出公海
      kickoutDialog: false,
      // 省市级二级联动
      provinceAndCityData,
      // 意向课程
      course: [],
      // 历史记录数据
      recordList: []
    }
  },
  created() {
    // 渲染列表
    this.getList()
    // 获取历史记录
    this.record()
  },
  methods: {
    /**
     * 处理历史记录时间
     */
    startDate(val) {
      const res = val ? val.split('T').join(' ') : '--'
      return res
    },
    /**
     * 历史记录
     */
    async record() {
      const id = this.$route.query.id
      const res = await recordComMerceDetail(id)
      this.recordList = res.data
    },
    /**
     * 意向学科/意向课程联动
     */
    async subjects() {
      this.form.courseId = ''
      const res = await courseComMerceDetail(this.form.subject)
      this.course = res.data
      console.log(this.form.courseId)
    },
    /**
     * 修改客户资料
     */
    information() {
      // 兜底校验
      this.$refs.form.validate(async flag => {
        if (!flag) return
        // 调用接口
        await putComMerceDetail(this.form)
        // 成功提醒
        this.$message.success('保存成功')
        // 重新渲染
        this.getList()
      })
    },
    /**
     * 回填数据
     */
    async getList() {
      // 接受传过来的id
      const id = this.$route.query.id
      // 调用接口
      const res = await getComMerceDetail(id)

      // 处理地区数据
      setTimeout(() => {
        this.form = res.data
        this.form.provinces = JSON.parse(res.data.provinces)?.map(item => item + '')
      }, 1000)
    },
    // 踢出公海弹窗
    kickout() {
      this.kickoutDialog = true
    }
  }
}
</script>

<style lang="scss" scoped>
// 历史沟通记录
.history {
  width: 100%;
  height: 250px;
  border: 1px solid #e4e4e4;
  border-radius: 2px;

}
::v-deep .has-gutter{
  background-color: #e4e4e4 !important;
}
::v-deep .cell{
  font-weight: 400;
  color: #000;
}
::v-deep .el-table_1_column_5 .cell:nth-child(1){
  color: #000 !important;
}
::v-deep .el-table_1_column_5 .cell{
  color: #1890ff !important;
}
// 添加沟通记录信息
::v-deep .CommunicationInfo {
  width: 100%;
  height: 270px;
  border: 1px solid #e4e4e4;
  border-radius: 2px;
  .CommunicationBorder {
    display: flex;
    width: 1150px;
    height: 220px;
    border: 1px solid #e4e4e4;
    margin-left: 15px;
    margin-top: 25px;
    border-radius: 7px;
    .left {
      display: inline-block;
      width: 560px;
      .el-input__inner {
        width: 430px !important;
      }
    }
    .right {
      display: inline-block;
      width: 550px;
      margin-top: 25px;
      margin-left: 10px;
      .el-textarea__inner {
        height: 103px;
      }
      .el-button {
        width: 130px;
        margin-left: 18px;
      }
    }
  }
}
// 客户意向
.Intention {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: #e4e4e4;
  margin-top: 10px;
  border-radius: 2px;
  .span1 {
    margin-left: 10px;
    color: #666666;
    font-weight: 700;
    font-size: 14px;
  }
}
.IntentionInfo {
  width: 100%;
  height: 260px;
  border: 1px solid #e4e4e4;
  border-radius: 2px;
  .IntentionBorder {
    width: 1150px;
    height: 210px;
    border: 1px solid #e4e4e4;
    margin-left: 15px;
    margin-top: 25px;
    border-radius: 7px;
  }
}
// 客户资料
.Customers {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: #e4e4e4;
  margin-top: 10px;
  border-radius: 2px;
  .span1 {
    margin-left: 10px;
    color: #666666;
    font-weight: 700;
    font-size: 14px;
  }
  .span2 {
    margin-left: 10px;
    color: #aaaaaa;
    flex-wrap: 200;
    font-size: 12px;
    line-height: 40px;
  }
}
.customersInfo {
  width: 100%;
  height: 330px;
  border: 1px solid #e4e4e4;
  border-radius: 2px;
  .customersBorder {
    width: 1150px;
    height: 280px;
    border: 1px solid #e4e4e4;
    margin-left: 15px;
    margin-top: 25px;
    border-radius: 7px;
  }
}
::v-deep .el-form-item__label {
  color: #000;
  font-weight: 400;
}
::v-deep .el-input__inner {
  width: 180px;
  height: 40px;
}
::v-deep .inputs .el-input__inner {
  width: 98% !important;
}
::v-deep .el-input__count {
  margin-left: -70px !important;
}
</style>

